<template>
    <el-dialog v-model="dialogFormVisible" :title="title" @close="closeDialog" style="width: 800px;">
        <div id="printMain" ref="print">
            <div id="print-area" class="asset-receipt">
                <table border="1" cellspacing="0" cellpadding="5">
                    <thead>
                        <tr>
                            <th colspan="8" class="title">河北正定中学固定资产验收单</th>
                        </tr>
                        <tr>
                            <th colspan="6" class="date">2024 <span class="font">年</span> 09 <span class="font">月</span> 19 <span
                                    class="font">日</span></th>
                            <th colspan="1">编号：</th>
                            <th colspan="1"> </th>
                        </tr>
                        <tr>
                            <th colspan="2">资产名称</th>
                            <th colspan="1">规格型号</th>
                            <th colspan="1">单价</th>
                            <th colspan="1">单位</th>
                            <th colspan="1">数量</th>
                            <th colspan="1">金额</th>
                            <th colspan="1">备注</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="item in assets" :key="item.name">
                            <td colspan="2">{{ item.name }}</td>
                            <td colspan="1">{{ item.model }}</td>
                            <td colspan="1">{{ item.unitPrice }}</td>
                            <td colspan="1">{{ item.unit }}</td>
                            <td colspan="1">{{ item.quantity }}</td>
                            <td colspan="1">{{ item.amount }}</td>
                            <td colspan="1"></td>
                            <!-- <td colspan="1"></td> -->
                        </tr>
                        <tr>
                            <td colspan="2">合计</td>
                            <td colspan="1"></td>
                            <td colspan="1"></td>
                            <td colspan="1"></td>
                            <td colspan="1"></td>
                            <td colspan="1">500</td>
                            <td colspan="1"> </td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                <div class="name_box">
                                    <p>主管领导:</p>
                                    <img class="imgName"
                                        src="https://wx.zhengzhong.cn/upload/2024-10-12/026648a3fec53e0a5ebbbf1d31b1978.png"
                                        alt="Server Image">
                                </div>
                            </td>
                            <td colspan="2">
                                <div class="name_box">
                                    <p>主管领导:</p>
                                    <img class="imgName"
                                        src="https://wx.zhengzhong.cn/upload/2024-10-12/026648a3fec53e0a5ebbbf1d31b1978.png"
                                        alt="Server Image">
                                </div>
                            </td>
                            <td colspan="2">
                                <div class="name_box">
                                    <p>二级资产会计:</p>
                                    <img class="imgName"
                                        src="https://wx.zhengzhong.cn/upload/2024-10-12/026648a3fec53e0a5ebbbf1d31b1978.png"
                                        alt="Server Image">
                                </div>
                            </td>
                            <td colspan="2">
                                <div class="name_box">
                                    <p>资产管理员:</p>
                                    <img class="imgName"
                                        src="https://wx.zhengzhong.cn/upload/2024-10-12/026648a3fec53e0a5ebbbf1d31b1978.png"
                                        alt="Server Image">
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <!-- <div class="signatures">
                    <div class="name_box">
                        <p>主管领导:</p>
                        <img src="https://wx.zhengzhong.cn/upload/2024-10-12/026648a3fec53e0a5ebbbf1d31b1978.png"
                            alt="">
                    </div>
                    <div class="name_box">
                        <p>主管领导:</p>
                        <img src="https://wx.zhengzhong.cn/upload/2024-10-12/026648a3fec53e0a5ebbbf1d31b1978.png"
                            alt="">
                    </div>
                    <div class="name_box">
                        <p>二级资产会计:</p>
                        <img src="https://wx.zhengzhong.cn/upload/2024-10-12/026648a3fec53e0a5ebbbf1d31b1978.png"
                            alt="">
                    </div>
                    <div class="name_box">
                        <p>资产管理员:</p>
                        <img src="https://wx.zhengzhong.cn/upload/2024-10-12/026648a3fec53e0a5ebbbf1d31b1978.png"
                            alt="">
                    </div>
                </div> -->
            </div>
        </div>




        <template #footer>
            <span class="dialog-footer">
                <el-button @click="clear()">关闭</el-button>
                <el-button type="primary" @click="print()">打印</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script>
import { ref } from "vue";
import { httpService } from "@/utils/httpService";
import { ElMessage, ElForm } from "element-plus";
import { vxRule } from "@/utils/validator";

export default {
    name: "AddFaAssets",
    components: { ElForm, ElMessage },
    data() {
        return {
            dialogFormVisible: ref(false),
            assets: [
                {
                    name: "台式机",
                    model: "acerD650",
                    unitPrice: 4530,
                    unit: "套",
                    quantity: 11,
                    amount: 49830,
                },
            ],
        };
    },
    methods: {
        closeDialog() {
            this.list = []
            this.clear()
        },
        clear() {
            this.dialogFormVisible = false;
            this.amount1 = ''
            this.money1 = ''
            this.minusAmount1 = ''
            this.minusMoney1 = ''
        },

        print() {

            const printContent = document.getElementById('print-area').innerHTML;
            // console.log(printContent);
            const WinPrint = window.open('', '', 'width=1000,height=600');
            WinPrint.document.write('<html><head><title>Print</title>');
            WinPrint.document.write(
                `<style>@media print {
         @page { margin: 0;  } 
         table { border-collapse: collapse;  margin:5vh 8vw 0 8vw; } 
         th, td { border: 1px solid black; padding: 8px; text-align: left; } 
         th { background-color: #f2f2f2; } 
         .title {
    font-size: 18px;
    font-weight: 500;
    color: #000;
    text-align:center;
}
         .font {
    font-size: 14px;
    font-weight: 500;
    color: #000;  
}
.date{
    text-align:center;
}
         .name_box { 
    display: flex;
    align-items: center;
    font-size: 18px;
    flex: 1;
}
        .imgName{
            width:50%;
        }
        }  
         </style> 
         `);
            WinPrint.document.write('</head><body>');
            WinPrint.document.write(printContent);
            WinPrint.document.write('</body></html>');
            WinPrint.document.close();
            WinPrint.print();
            WinPrint.close();




        },
    },
};
</script>
<style scoped>
.asset-receipt {
    width: 100%;
    margin-top: 20px;
    text-align: center;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 10px;
}

th,
td {
    padding: 10px;
    text-align: center;
}

.title {
    font-size: 18px;
    font-weight: 500;
    color: #000;
}

.signatures {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.name_box {
    display: flex;
    align-items: center;
    font-size: 18px;
    flex: 1;
}

.name_box img {
    width: 40%;
}
</style>
